<template>
	<view >
		<view style="width: 702upx;height: 300upx;background: #F8F8F8;border-radius: 16upx;
		margin-top: 48upx;margin-left: 24upx;margin-right: 24upx;">
		
			<textarea style="color: #191919;" v-model="content" placeholder="请详细描述问题和意见,我们会认真查看" />
		
		</view>
		
		
		<view style="display: flex;flex-direction: row;align-items: center;">
			<image style="width: 160upx;height: 160upx;margin-top: 26upx;margin-bottom: 30upx;margin-left: 30upx;"
				src="../../static/images/publish-img-icon.png" mode="" @click="uploadImgLocal"></image>
			<view style="display: flex;flex-direction: row;position: relative;" v-for="(item,index) in uploadImgList" :key="index">
				
				
				<image :src="item" @tap="previewImg(index)" style="width: 160upx;height: 160upx;border-radius: 12upx;margin-left: 16upx;" mode="aspectFill"></image>
				<view style="background: #000000;border-radius: 16upx;width: 32upx;height: 32upx;line-height: 32upx;
				position: absolute;left: 75%;top: 8%;
				text-align: center;opacity:0.6" @click="removeImg(index)">
					<span style="color: #FFFFFF;width: 14upx;height: 14upx;">×</span>
				</view>
			</view>	
			
		</view>
		
		
		<view style="position: fixed;bottom: 0upx;margin-bottom: 68upx;padding: 0 30upx;" @click="submit">
			<view style="width: 690upx;height: 80upx;background: #FF4E4C;border-radius: 40upx;
			text-align: center;line-height: 80upx;color: #FFFFFF;">提交</view>
		</view>
		
		
	</view>
</template>

<script>
	import {feedback} from '../../api/mine/feedback.js'
	import {baseUrl} from '../../utils/request'
	export default {
		data() {
			return {
				content:"",
				uploadImgList:[],
				imgList:[]
			}
		},
		methods: {
			removeImg(index){
				console.log("index:"+index)
				var temArray=[]
				for (var i = 0; i < this.uploadImgList.length; i++) {
					if(i !==index){
						temArray.push(this.uploadImgList[i])
					}
				}
				this.uploadImgList=temArray
				
			},
			previewImg(index) {
				console.log("index:"+index)
				let _this = this;
				let imgsArray = [];
				for (let i = 0; i < this.uploadImgList.length; i++) {
						imgsArray.push(this.uploadImgList[i]);
					
				}
				uni.previewImage({
					current: index,
					urls: imgsArray,
					indicator: 'number',
					loop: true,
					longPressActions:{
						itemList:['保存图片'],
						success(res) {
							console.log(res)
							uni.downloadFile({
								url:this.uploadImgList[index],
								success(result) {
									uni.saveImageToPhotosAlbum({
										filePath:result.tempFilePath,
										success() {
											uni.showToast({
												title:'保存成功'
											})
										}
									})
								}
							})
						}
					}
				});
			},
			uploadImgLocal() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						this.uploadImgList=tempFilePaths
					}
				})
			},
			uploadImgs(){
				const arr = []
				const that = this
				for (var i = 0; i < this.uploadImgList.length; i++) {
					const a = new Promise(reslut => {
						uni.uploadFile({
							url: baseUrl+'/upload/img',
							filePath:this.uploadImgList[i],
							name:'file',
							success(res) {
								that.imgList.push(JSON.parse(res.data).data)
								reslut()
							}
						})
					})
					arr.push(a)
				}
				return Promise.all(arr)
			},
			submit(){
				let params={}
				let that=this
				params.content=this.content
				this.uploadImgs().then(()=>{
					params.images=this.imgList
					feedback(params).then(res=>{
						if(res.status==200){
							that.content=""
							uni.showToast({
								icon:'none',
								duration:2000,
								title:'感谢您的反馈'
							})
							setTimeout(function() {
								uni.switchTab({
									url:'../mine/mine'
								})
							},1000)
						
						}
					})
					
				})
				
				
				
				
			
			}
		}
	}
</script>

<style>

</style>
